<template>
  <div class="route-timeline">
    <div v-if="routePointsWithInfo.length > 0" class="timeline-wrapper">
      <el-timeline>
        <el-timeline-item
          v-for="(point, index) in routePointsWithInfo"
          :key="index"
          :type="getTimelineItemType(index)"
          :timestamp="point.time"
          :hollow="index === 0 || index === routePointsWithInfo.length - 1"
          :size="index === 0 || index === routePointsWithInfo.length - 1 ? 'large' : 'normal'"
        >
          <el-card class="timeline-card" shadow="hover">
            <div class="point-header">
              <span class="point-location">{{ point.location }}</span>
              <el-tag 
                :type="getTagType(index)" 
                size="small"
                v-if="index === 0 || index === routePointsWithInfo.length - 1"
              >
                {{ index === 0 ? '起点' : '终点' }}
              </el-tag>
            </div>
            <div class="point-details">
              <div class="detail-item" v-if="point.speed">
                <i class="el-icon-odometer"></i>
                <span>{{ point.speed }} km/h</span>
              </div>
              <div class="detail-item" v-if="point.altitude">
                <i class="el-icon-top"></i>
                <span>{{ point.altitude }} m</span>
              </div>
              <div class="detail-item" v-if="point.mileage">
                <i class="el-icon-position"></i>
                <span>{{ point.mileage }} km</span>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    
    <el-empty 
      v-else 
      description="暂无轨迹数据，请选择时间范围查询GPS轨迹"
      :image-size="120"
    >
      <template #image>
        <div class="empty-icon">
          <i class="el-icon-map-location"></i>
        </div>
      </template>
    </el-empty>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  routePoints: {
    type: Array,
    default: () => []
  }
})

// 格式化时间
const formatTimestamp = (timestamp) => {
  if (!timestamp) return '-'
  if (typeof timestamp === 'number') {
    return new Date(timestamp).toLocaleString()
  }
  return new Date(timestamp).toLocaleString()
}

// 获取路线点位置描述
const getLocationDesc = (lat, lng) => {
  return `位置: [${lat.toFixed(6)}, ${lng.toFixed(6)}]`
}

// 获取时间线项目类型
const getTimelineItemType = (index) => {
  if (index === 0) return 'success'
  if (index === props.routePoints.length - 1) return 'success'
  return 'primary'
}

// 获取标签类型
const getTagType = (index) => {
  if (index === 0) return 'success'
  if (index === props.routePoints.length - 1) return 'warning'
  return 'info'
}

// 路线点带附加信息
const routePointsWithInfo = computed(() => {
  return props.routePoints.map(point => ({
    ...point,
    time: point.time || formatTimestamp(point.timestamp),
    location: getLocationDesc(point.lat, point.lng),
    speed: point.speed ? point.speed.toFixed(2) : null,
    altitude: point.altitude ? point.altitude.toFixed(2) : null,
    mileage: point.mileage ? point.mileage.toFixed(2) : null
  }))
})
</script>

<style lang="scss" scoped>
.route-timeline {
  .timeline-wrapper {
    max-height: 100%;
    overflow-y: auto;
    padding-right: 8px;
  }
  
  .timeline-card {
    margin-bottom: 8px;
    border-radius: 8px;
    border: none;
    
    :deep(.el-card__body) {
      padding: 12px;
    }
    
    &:hover {
      transform: translateX(4px);
      transition: all 0.3s ease;
    }
  }
  
  .point-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    
    .point-location {
      font-weight: 500;
      color: #303133;
      font-size: 13px;
      flex: 1;
      margin-right: 8px;
    }
  }
  
  .point-details {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    
    .detail-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #606266;
      background: #f5f7fa;
      padding: 4px 8px;
      border-radius: 4px;
      
      i {
        font-size: 14px;
        color: #909399;
      }
      
      span {
        font-weight: 500;
      }
    }
  }
  
  :deep(.el-timeline) {
    padding-left: 0;
  }
  
  :deep(.el-timeline-item__wrapper) {
    position: relative;
    padding-left: 28px;
    padding-bottom: 20px;
  }
  
  :deep(.el-timeline-item__tail) {
    left: 4px;
    border-left: 2px solid #e4e7ed;
  }
  
  :deep(.el-timeline-item__node) {
    left: -4px;
    
    &.el-timeline-item__node--large {
      width: 16px;
      height: 16px;
      left: -6px;
    }
  }
  
  :deep(.el-timeline-item__timestamp) {
    color: #909399;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
  }
  
  .empty-icon {
    font-size: 64px;
    color: #c0c4cc;
    
    i {
      font-size: inherit;
    }
  }
  
  :deep(.el-empty__description) {
    color: #909399;
    font-size: 14px;
  }
}

/* 滚动条样式 */
.timeline-wrapper::-webkit-scrollbar {
  width: 4px;
}

.timeline-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.timeline-wrapper::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 2px;
  
  &:hover {
    background: #909399;
  }
}
</style>